<template>
  <div class="main-charts">
    <CommonChartItem
      :api="oneApi"
      :option="oneOption"
      :formatOption="handleFormatOneChart"
    />

    <CommonChartItem
      :api="twoApi"
      :option="twoOption"
      :formatOption="handleFormaTwoChart"
    />
  </div>
</template>
<script>
import CommonChartItem from '../../../../components/ui/CommonChartItem.vue';
// import MainChartItem from './ChartItem.vue'
import { getKDataApi, getSimpleDataApi } from '@/api/data'
export default {
  name: "MainCharts",
  components: { CommonChartItem },
  data () {
    return {
      oneApi: getKDataApi,
      twoApi: getSimpleDataApi,
      oneOption: {
        title: {
          text: '商品类别销量图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['电子产品', '服装首饰', '文具办公', '汽车用品']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      },
      twoOption: {
        title: {
          text: '每日销量图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
    }
  },
  methods: {
    // 传递到图表组件中, 专门用来处理数据的
    handleFormatOneChart (data, option) {
      option.xAxis.data = data.x
      option.series = []
      option.legend.data.forEach((item, index) => {
        option.series.push({
          name: item,
          type: 'line',
          stack: 'Total',
          data: data.val[index]
        })
      })
    },
    handleFormaTwoChart (data, option) {
      // console.log(data, option);
      option.xAxis.data = data.map(item => item.x)
      option.series[0].data = data.map(item => item.val)
    }
  }
}
</script>
<style scoped>
.main-charts {
  padding: 14px 0px;
}
</style>